<template>
	<div class="block" style="margin-top: 10px;">
		<el-carousel :interval="4000" type="card" height="400px">
			<el-carousel-item v-for="(item,index) in slides" :key="index">
				<img :src="item.src">
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default {
		name: "App",
		props: ["speed"],
		components: {
			
		},
		data() {
			return {
				slides: [{
						src: require("../assets/images/品牌盛宴.jpg"),
						title: "品牌盛宴",
						href: "detail/analysis",
					},
					{
						src: require("../assets/images/精品促销.jpg"),
						title: "精品促销",
						href: "detail/count",
					},
					{
						src: require("../assets/images/天猫潮电.jpg"),
						title: "天猫国际",
						href: "http://xxx.xxx.com",
					},
					{
						src: require("../assets/images/促销精品.jpg"),
						title: "百款促销精品",
						href: "detail/forecast",
					},
				],
				nowIndex: 0,
			};
		},
		computed: {
			nextpage() {
				if (this.nowIndex === this.slides.length - 1) {
					return 0;
				} else {
					return this.nowIndex + 1;
				}
			},
			prevpage() {
				if (this.nowIndex === 0) {
					return this.slides.length - 1;
				} else {
					return this.nowIndex - 1;
				}
			},
		},
		methods: {
			goto(index) {
				this.nowIndex = index;
			},
			runInv() {
				this.invId = setInterval(() => {
					this.goto(this.nextpage);
				}, 2000);
			},
			clearInv() {
				clearInterval(this.invId);
			},
		},
		mounted() {
			this.runInv();
		},
	};
</script>

<style scoped="scoped">
	.block img {
		width: 100%;
	}
</style>
